<template lang="jade">

	div.homeloading
		dialog(:show.sync="show_dialog",)
			i.iconfont(@click=" show_dialog = false  ", style="bottom: -1.5rem;") &#xe629;
			img(src="../assets/images/index/dialog.png" , @click= " goPro ")

	div.top.homebanner
		div.warning 市场有风险,投资需谨慎
		swiper(:list="bannerlist", :aspect-ratio="300/750", :auto="true")

	div.homenotice
		i.iconfont &#xe7ab;
		ul(:style="topc")
			li(v-for="(index, item) in iData.notice")
				a(v-link="{ name: 'newsDetail', params: { newsId: item.id } }") {{{item.title}}}
		span.message(v-link="{ path: '/message'}" )
			i.iconfont.mail(style='margin-top: -0.2rem;') &#xe705;
		i.ball(v-show=" message_new==1 ")
	div.hl
		ul
			li
				a(@click="goAna('/aboutus')")
					i
						img(src="../assets/images/index/hl_icon_1.png")
					span 关于我们
			li
				a(@click="goAna('/analysis')")
					i
						img(src="../assets/images/index/hl_icon_2.png")
					span 数据披露

			li
				a(v-link="{ path: '/promotion'}"  )
					i
						img(src="../assets/images/index/hl_icon_3.png")
					span 新手福利

			li
				a(v-link="{ path: '/faqs'}"  )
					i
						img(src="../assets/images/index/hl_icon_4.png")
					span 帮助中心



	div.sp_box(v-show=" iData.novicelist!=false ")
		div.title 新手专享
		ul.productlist
			li(v-link="{ name: 'detail', params: { detailId: iData.novicelist.borrow_name_no_type == '1' ? novicelist.name_no:novicelist.borrow_nid } }")
				div.title
					span.name {{iData.novicelist.name}}
					span.fr 起投金额:100元
				flexbox
					flexbox-item(style="-ms-flex: 1.7;flex: 1.7; -webkit-flex: 1.7; -webkit-box-flex: 1.7;")
						span 借款金额
						b.mtxt {{iData.novicelist.account}}元
					flexbox-item
						span 约定收益率
						b.af {{iData.novicelist.borrow_apr}}%
					flexbox-item
						span 借款期限
						b {{iData.novicelist.borrow_period}}个月

					flexbox-item
						a.p_btn_nob.tcenter {{getType('1', iData.novicelist.status)}}

				flexbox
					flexbox-item(:span="6")
						剩余可投金额:{{iData.novicelist.borrow_account_wait}}元
					flexbox-item
						progress(:percent="iData.novicelist.borrow_account_scale", :show-cancel="false")
					flexbox-item(:span="2")
						span.mtxt {{iData.novicelist.borrow_account_scale}}%

	div.sp_box
		div.title 推荐项目
			span.more(v-link="{ path: '/invest/index?productype=current'}")
				更多>>
		ul.productlist
			li(v-for=" (index, item) in iData.borrowlist  " , @click ="goList(item)"  )

				div.title
					span.name{{item.name}}
					span.fr 起投金额:100元
				flexbox
					flexbox-item(style="-ms-flex: 1.7;flex: 1.7;-webkit-box-flex: 1.7;")
						span 借款金额
						b.mtxt {{item.account}}元
					flexbox-item
						span 约定收益率
						b.af {{item.borrow_apr}}%
					flexbox-item
						span 借款期限
						b {{item.borrow_period}}个月
					flexbox-item

						a(v-if=" item.rel_time!='' &&  item.status == 1 ", class=" b_btn_nob min ") {{item.rel_time}}
						a(v-else, v-bind:class=" getType('2', item.status) ") {{getType('1', item.status)}}


				flexbox
					flexbox-item(:span="6",  style=" min-width:110px;")
						剩余可投金额:{{item.borrow_account_wait}}元
					flexbox-item
						progress(:percent="item.borrow_account_scale", :show-cancel="false")
					flexbox-item(:span="2")
						span.mtxt {{item.borrow_account_scale}}%



	div.sc_box
		div.title
			span
				i.iconfont &#xe631;
				资讯频道
			span.more(v-link="{ path: '/news/index'}")
				更多>>
		ul.imglist
			li(v-for=" (index, item) in iData.zixunlist ", v-link="{ name: 'newsDetail', params: { newsId: item.id } }" )
				div.img
					img(src="{{item.img_cover}}")
				div.info
					div.stitle {{item.title}}
					div.extra
						span {{item.insert_time}}
						span.fr
							i.iconfont &#xe63f;
							b {{item.click}}

	div.sc_box
		div.title
			span
				i.iconfont &#xe634;
				最新公告
			span.more(v-link="{ path: '/news/183'}")
				更多>>
		ul.newslist
			li(v-for=" (index, item) in iData.gonggaolist ", v-link="{ name: 'newsDetail', params: { newsId: item.id } }" )
				span.name {{item.title}}
				span.fr {{item.insert_time}}



	div.sc_box
		div.title
			span
				i.iconfont &#xe641;
				网贷学堂
			span.more(v-link="{ path: '/news/195'}")
				更多>>
		ul.newslist
			li(v-for=" (index, item) in iData.xuetanglist " , v-link="{ name: 'newsDetail', params: { newsId: item.id } }" )
				a
					span.name {{item.title}}
					span.fr {{item.insert_time}}

	footer
		//div.fmenu
			ul.triple
				li 关于有喜
				li 帮助中心
				li.none 登录注册
				li 安全保障
				li 信息披露
				li.none 联系我们
		div.copyright 深圳市有喜资产管理有限公司 版权所有 <br> 备案号：粤ICP备16008329号 <br>地址:广东省深圳市福田区车公庙创新科技广场一期B座1508C <br>客服电话：400-678-8080 手机：18617068080 <br>投资交流群：479966413

			ul.authority
				li
					a(href="https://ss.knet.cn/verifyseal.dll?sn=e16032944030062941tbic000000&ct=df&a=1&pa=0.01922142133116722", target="_blank")
						img(src="../assets/images/news/authority/cnnic.png")
				li
					a(href="http://webscan.360.cn/index/checkwebsite/url/www.uximoney.com", target="_blank")
						img(src="../assets/images/news/authority/360cert.png")
				li
					a(href="https://szcert.ebs.org.cn/207cbdb7-7b66-4332-aa5a-c7c9a656eabb", target="_blank")
						img(src="../assets/images/news/authority/govIcon.gif")
				li
					a(href="https://trustsealinfo.websecurity.norton.com/splash?form_file=fdf%2Fsplash.fdf&sap=&dn=www.uximoney.com&zoneoff=&lang=zh_CN", target="_blank")
						img(src="../assets/images/news/authority/norton.png")


</template>


<style>
@import '~vux/dist/vux.css';
</style>



<script>

import api from '../data/api';
import {c_is_logined, c_api_index} from '../config/api'
import '../assets/sass/common/circle.scss'
import '../assets/sass/index/index.scss'
import {Dialog, Progress, Swiper, Flexbox, FlexboxItem} from 'vux'

import { mapGetters, mapActions } from 'vuex'
var vm = this;
export default {

	data () {
		return{
			iData:{},

			currentView: 'index',
			busy:false,
			percent2:25,
			showLogo:true,

			activeIndex:0,
			message_new:0,
			activeStr:'',
			bannerlist: [{url: '',img: ''}]

		}
	},

    computed: {
		...mapGetters(['phone']),

		topc(){
			return 'top:' + ( - this.activeIndex * 1 ) + 'rem';
		}
	},

	components: {
		Dialog,
		Progress,
		Swiper,
		Flexbox,
		FlexboxItem
	},

	methods:{

		goPro(){
			this.$route.router.go('/reg')
		},

		goList(ob){

			if(ob.count_number > 1){
				this.$route.router.go('/invest/index?productype=current&listId='+ob.name_no)
			}else{
				this.$route.router.go('/invest/detail/'+ob.borrow_nid)
			}
		},

		goAna(key){
			//this.$store.dispatch('setShowLoading', true);
			this.$store.dispatch('setShowLoading', true);
			this.$route.router.go(key)
		},

		setView(key){
			this.currentView = key;
			if(key == 'user')
				this.showLogo = false;
			else
				this.showLogo = true;
		},

		getType(type, val){

			var txt = "", cs = "";
			switch(val){
				case 1:
					txt = "预告"
					cs = "b_btn_nob tcenter"
					break;
				case 2:
					txt = "结清"
					cs = "p_btn_nob tcenter"
					break;
				case 3:
					txt = "还款中"
					cs = "p_btn_nob tcenter"
					break;
				case 4:
					txt = "投标中"
					cs = "p_btn_nob tcenter"
					break;
				case 5:
					txt = "查看"
					cs = "p_btn_nob tcenter"
					break;
			}
			return type == "1" ? txt:cs
		},


		getOrderType(val){
			var txt = ""
			switch(val){
				case "1":
					txt = "楼贷标"
					break;
				case "2":
					txt = "车贷标"
					break;
			}
			return txt
		},

		async is_login(){
			var res = await api.user.is_Logined();
			if(res.status == true ){
				this.$store.dispatch('setPhone', res.phone);
			}
		},

		async fetch() {

            var res = await api.com.index();
			vm.iData = res.data;
			//vm.$store.dispatch('setShowLoading', false);
			this.$store.dispatch('setShowLoading', false);

			this.bannerlist = vm.iData.bannerlist;


			setInterval(function() {
				if(vm.activeIndex < vm.iData.notice.length-1) {
					vm.activeIndex += 1;
				} else {
					vm.activeIndex = 0;
				}
			}, 3000);


		}
	},
	route: {
		activate ( transition ) {
			vm = this;

			//vm.$store.dispatch('setShowLoading', true);
			this.$store.dispatch('setShowLoading', true);
			document.title = "有喜财富 - 手机版"
			transition.next();

			this.$nextTick(function(){
				vm.is_login();
				vm.fetch();
			});
		}
	}
}
</script>


<style lang="scss" scoped>

.vux-flex-row{
	display: flex;
	display: -webkit-flex;
	-webkit-align-items:center;

}

.vux-flexbox-item{
	display: block;
	width:100%;
}
</style>
